<template>
    <div class="container-Elevator">
        <nut-elevator :index-list="transformDataToNewFormat(allCitydata)" :is-sticky="true" @click-item="clickItemss"
            :height="elevatorContainerHeight" @click-index="clickIndex">
            <template v-slot:default="slotProps">
                <nut-button shape="square" type="default" size="mini" style="border-radius: 6px;" block
                    v-if="slotProps.item.name == '黔西南布依族苗族自治州'">
                    {{ slotProps.item.name.slice(0, 6) }}
                </nut-button>
                <nut-button shape="square" type="default" size="mini" style="border-radius: 6px;" block v-else>
                    {{ slotProps.item.name.replace(/市|自治州/g, '') }}
                </nut-button>
            </template>
        </nut-elevator>
    </div>
</template>
<script setup lang="ts">
import { ref, onMounted, computed } from 'vue';
import { transformDataToNewFormat } from '../../../utils/tools'
import { storeToRefs } from "pinia";
import { useLocationStore } from "../../../store";
import * as _ from "underscore";
const locationStore = useLocationStore();
import Taro, { eventCenter } from "@tarojs/taro";
const { allCitydata } = storeToRefs(locationStore);
const router = Taro.useRouter();
const elevatorContainerHeight = ref(0)
const emit = defineEmits(['clickItem'])
const clickItemss = (key, item) => {
    emit('clickItem', { id: item.id, cityName: item.name })

};
const clickIndex = (key) => {
    console.log(key);
};
onMounted(() => {
    eventCenter.once(router.onReady, () => {
        getElevatorContainer();
    });
    // console.log(transformDataToNewFormat(allCitydata),"transformDataToNewFormat(allCitydata)");
    
});
const getElevatorContainer = () => {
    const query = Taro.createSelectorQuery()
        .select(".container-Elevator")
        .boundingClientRect();
    query.selectViewport();
    query.exec(function (res) {
        if (res[0]) {
            elevatorContainerHeight.value = res[0].height;
        }
    });
};
</script>
<style lang="less">
.container-Elevator {
    height: 100%;
    width: 100%;

    .active {
        color: #5232B7 !important;
    }

    .nut-elevator__fixed-title {
        color: #5232B7 !important;

    }

    .nut-elevator__list--mini {
        position: relative !important;
    }

    .nut-elevator__bars {
        top: 30% !important;
        background: rgba(0, 0, 0, .1);
    }

    .nut-elevator__list__item__code {
        margin-bottom: 1rem;
    }

    .nut-elevator__list__item__name {
        display: inline-block;
        padding: 0;
        margin: 0 0 0.5rem 0.5rem;
        width: 5.6rem;
        border-radius: 3px;







    }


}
</style>